<template>
	<view class="content">
		<view class="personal_item">
			<text>头像</text>
			<image :src="img" mode="" @click="openCamera"></image>
			<!-- <view class="add-img-box">
				<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
					<image class="add-img" @click="imgInfo(index)" :src="item.path" mode="aspectFill"></image>
				</view>
				<view class="add-img-item">
					<image class="add-img" src="../../../static/images/s16.png" @click="openCamera" ></image>
				</view>
			</view> -->
			
		</view>
		<view class="personal_one">
			<text>昵称</text>
			<!-- <view class="personal_one_text" @tap="nickName(userInfo.nickname)">
				<text>{{userInfo.nickname}}</text>
				<image src="../../../static/images/s54.png" mode=""></image>
			</view> -->
			<input type="text" value="" v-model="nickname" placeholder="请输入" />
		</view>
		<view class="personal_one">
			<text>性别</text>
			<view class="personal_one_text" @tap="sex">
				<text class="bd" v-if="userInfo.gender == 0 ">  {{ "请选择"}}  </text>
				<text class="bd" v-if="userInfo.gender == 1 ">  {{"男"}}   </text>
				<text class="bd" v-if="userInfo.gender == 2 ">  {{"女"}}   </text>
				
				<image src="../../../static/images/s54.png" mode=""></image>
			</view>
		</view>
		<view class="personal_one">
			<text>生日</text>
			<view class="personal_one_text time">
			
				<gpp-date-picker  @onCancel="onCancel" @onConfirm="onConfirm"   :defaultValue="pickerDate">
				   	<text v-if="flag">{{ userInfo.birthdaytime | birtime }} </text> 
							<text v-else>	{{pickerDate}} </text> 
				</gpp-date-picker>
				<image src="../../../static/images/s54.png" mode=""></image>
			</view>
		</view>
		<view class="personal_one">
			<text>手机号</text>
			<view class="personal_one_text" @tap="bindPhone(userInfo.mobile)">
				<text class="bd">{{userInfo.mobile}}</text>
				<image src="../../../static/images/s54.png" mode=""></image>
			</view>
		</view>
<view class="save" @tap='save'>
	保存
</view>
	</view>
</template>

<script>
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	export default {
		components: {
			gppDatePicker
		},
		data() {
			return {
				//用户信息
				userInfo:{},
				flag:true,
				sexs:'',
				pickerDate: '2012-09-09',
				imgList: [],
				cloudimgList: [],
				'img':'',
				nickname:''
			};
		},
		onLoad() {
			//用户信息
			this.inifo()
			
		},
		onShow() {
			// this.userInfo.nickname = uni.getStorageSync('name')
			this.userInfo.gender = uni.getStorageSync('sex')		
			// this.img = uni.getStorageSync('img')
	
		},
		methods: {
			
			//用户信息
			inifo(){
				this.$ajax(
				this.apiList.users,
				'POST',
				).then(res=>{
					this.userInfo = res.data
					this.img = res.data.avatar
					this.nickname = res.data.nickname
					uni.setStorageSync('img',this.img)
					// console.log(res)
				})
			},
			//保存
			save(){
				this.$ajax(
				this.apiList.editinfo,
				{
					avatar:this.img,
					nickname:this.nickname,
					gender:uni.getStorageSync('sex')	,
					birthdaytime:this.pickerDate 
				},
				'POST'
				).then(res=>{
				this.$sToast(res.msg)
				uni.switchTab({
					url:'../user'
				})
				})
			},
			onCancel(e) {
			console.log(e);
			},
			onConfirm(e) {
				this.flag = false
				this.pickerDate = e.dateValue; //获取选择到的日期
				// alert(e.dateValue);
			},
			nickName(name){
				uni.navigateTo({
					url:'../nickName/nickName?name='+name
				})
			},
			sex(){
				uni.navigateTo({
					url:'../sex/sex'
				})
			},
			bindPhone(phone){
				uni.navigateTo({
					url:'../Phone/Phone?phone='+phone
				})
			},
			// imgInfo(i) {
			// 	let tempList = [];
			// 	this.imgList.forEach(img => {
			// 		tempList.push(img.path);
			// 	});
			// 	console.log(tempList);
			// 	//显示图片
			// 	uni.previewImage({
			// 		current: i,
			// 		loop: false,
			// 		urls: tempList,
			// 		indicator: 'default'
			// 	});
			// },
			 urlTobase64(url) {
				 var that = this
				 var toBase64Url;
				 uni.request({
				 url: url,
				 method: 'GET',
				 responseType: 'arraybuffer',
				 success: async res => {
				 let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				 toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
					this.$ajax(
						this.apiList.shang, {
							img: toBase64Url
						},
						'POST',
					).then(res => {
						if(res.code){
							this.img = res.data
						 uni.setStorageSync('img', this.img )
						}
					})
				 }
				 });
			 },
			//上传头像
			openCamera() {
				uni.chooseImage({
					sourceType:['camera','album '],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: res => {
						this.imgList = [...res.tempFiles];
						this.urlTobase64(this.imgList[0].path)
						
					}
				});
			},
			//替换图片
			
		}
	}
</script>

<style lang="scss">
	.content {
		.personal_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1px solid #f5f5f5;

			text {
				font-size: 28rpx;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
			}
		}

		.personal_one {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1px solid #f5f5f5;
			input{
				text-align: right;
				color: #666;
			}
			text {
				font-size: 28rpx;
			}
			.time{
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
			.personal_one_text {
				image {
					width: 18rpx;
					height: 28rpx;
					padding-left: 20rpx;
				}

				.bd {
					color: #BDBDBD;
				}
			}
		}
		.save{
			width: 50%;
			height: 88upx;
			border-radius: 20upx;
			text-align: center;
			line-height: 88upx;
			font-size: 32upx;
			color: #fff;
			margin: 60% auto;
			background-color:rgba(139, 221, 142, 1) ;
		}
	}
</style>
